<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员</title>
    <link rel="stylesheet" href="../fonts/element-icons.ttf">
    <link rel="stylesheet" href="../fonts/element-icons.woff">
    <link rel="stylesheet" href="../css/ele.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/url.js"></script>
    <!-- <script src="../node_modules/element-ui/lib/index.js"></script> -->
    <script src="../js/ele.js"></script>


    <link rel="stylesheet" href="../css/public.css">
    <script src="../js/Mixin.js"></script>
    <script src="../js/crypto-js.min.js"></script>
    <script src="../js/aes.js"></script>
    <link rel="stylesheet" href="../css/memberLogin.css">
    <script src="../js/qrcode.js"></script>
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <header>
            <div class="heart ng-scope" ng-controller="HeartForm">
                <div class="logo" @click="goHome">
                    <img src="../image/index/logo.png" alt="" style="width: 123px;height: 59px;margin-top: 8px;">
                    <div style="width: 1px;
                height: 24px;
                background: #333333;
                margin-top: 7%;
                margin-right: 9px;"></div>
                    <div>留学大数据，智能选校专家</div>
                </div>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="menuSelect">
                    <el-submenu index="1">
                        <template slot="title">产品</template>
                        <div class="chanpin">
                            <ul class="unav">
                                <li :class="[activenavliIndex==0?'activenavli':'']" @click="unavclcik(0)">全球院校库</li>
                                <li :class="[activenavliIndex==1?'activenavli':'']" @click="unavclcik(1)">智能选校系统</li>
                            </ul>
                            <div style="margin-left: 53px;" v-if="activenavliIndex==0">
                                <div class="ltitle"> <img src="../image/index/quanqiu.png" alt=""
                                        style="width: 26px;vertical-align: bottom;">
                                    全球院校库</div>
                                <div class="lcontent">
                                    <!-- <div> -->
                                    <ul v-for="(item,index) in headerList" :key="index">
                                        <li>{{item.name}}</li>
                                        <li v-for="i in item.universityItems" @click="qqyxkClick(item.id,i.id)">
                                            {{i.name}}院校库
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div style="margin-left: 53px;" v-if="activenavliIndex==1">
                                <div class="ltitle"> <img src="../image/index/quanqiu.png" alt=""
                                        style="width: 26px;vertical-align: bottom;">
                                    智能选校系统</div>
                                <div class="lcontent">
                                    <div>
                                        <ul>
                                            <li v-for="(i,index) in znxxxtList" :key="index" style="font-size: 12px;"
                                                @click="znxxxtSearch(i)">
                                                {{i.name}}</li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-submenu>
                    <el-menu-item index="2">会员</el-menu-item>
                    <el-menu-item index="3">套餐</a></el-menu-item>
                    <el-menu-item index="4">合作</a></el-menu-item>

                </el-menu>
                <div class="user_box" id="user_box">
                    <div v-if="isLogin">
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                <img :src="HeadImageUrl" alt=""
                                    style="width: 33px;height: 33px; vertical-align: middle;margin-right: 8px;">
                                {{nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-user" @click.native="goUser">个人中心</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-layout"
                                    @click.native="layoutLogin">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-else @click="login"><img src="../image/index/user.png" alt=""
                            style="width: 22px;vertical-align: middle;"> <a href="./login.html">登录</a>/ <a
                            href="./register.html">注册</a> </div>
                </div>
            </div>
        </header>
        <div class="bgc">
            <div style="display: flex;justify-content: center; margin-top: 50px;">
                <div class="personal">
                    <div style="display: flex;">
                        <img :src="HeadImageUrl" alt="" style="width: 50px;">
                        <div style="margin-left: 8px;">
                            <p style=" font-size: 17px;color: #333333;">{{nickname}}</p>
                            <img v-if="memberInfo.membType=='userVIP'" src="../image/member/vip1.png" alt=""
                                style="width: 35px;margin-top: 5px;">
                            <div v-if="memberInfo.membType=='userSVIP'" style="width: 35px;margin-top: 5px;    font-size: 11px;
                                background: #eaf0f2;
                                color: #fac67d;
                                text-align: center;
                                border-radius: 5px;">SVIP</div>
                            <img v-if="memberInfo.membType=='UserNew'||memberInfo.membType=='User'"
                                src="../image/member/member.png" alt="" style="width: 57px;margin-top: 10px;">
                        </div>
                    </div>
                    <!-- VIP会员 -->
                    <div v-if="memberInfo.membType=='userVIP'||memberInfo.membType=='userSVIP'" class="isLoginContent">
                        <p>当前会员等级：</p>
                        <div>专业VIP <span @click="openVip">续费</span> </div>
                        <p>会员到期时间：</p>
                        <div>2025年12月15日 21:38:07</div>
                        <img v-if="memberInfo.membType!='userSVIP'" src="../image/member/zsdz.png" alt=""
                            style="width: 100%;margin-top: 20px;" @click="openSVip">
                    </div>
                    <!-- 普通用户 -->
                    <div v-if="memberInfo.membType=='UserNew'||memberInfo.membType=='User'"
                        style="text-align: center;position: relative;">
                        <img src="../image/member/VIP.png" alt="" style="width: 81px;margin-top: 28px;">
                        <img src="../image/member/badge_discount .png" alt="" style="width: 33px;position: absolute;right: 18%;
                        top: 9%;">
                        <div style="font-size: 20px;color: #0094FF;margin-top: 7px;">{{memberpricelists.price}}<span
                                style="font-size: 10px;">元/年</span> </div>
                        <div style="font-size: 10px;color: #999999;margin-top: 7px;">每天仅需{{(memberpricelists.price /
                            30).toFixed(2)}}元
                        </div>
                        <img src="../image/member/open.png" alt="" style="width: 100%;margin-top: 20px;"
                            @click="openVip" />
                    </div>
                </div>
                <!-- VIP会员 -->
                <div class="countVip" v-if="memberInfo.membType=='userVIP'||memberInfo.membType=='userSVIP'">
                    <div class="ctop">
                        <div>
                            选校系统
                        </div>
                        <div>
                            全球院校库
                        </div>
                        <div>
                            智能筛选
                        </div>
                    </div>
                    <div class="cbottom">
                        <div>
                            <div v-for="i in priceList">
                                <span>{{i.name}}</span>
                                <span style="color: #0094FF;">无限期</span>
                            </div>
                        </div>
                        <div>
                            <div v-for="i in priceList">
                                <span>{{i.name}}</span>
                                <span style="color: #0094FF;">无限期</span>
                            </div>
                        </div>
                        <div>
                            <div>
                                <span style="color: #0094FF;margin: auto;">不限次</span>
                            </div>
                        </div>
                    </div>
                    <img src="../image/member/gmzssjk.png" alt="" @click="gmzssjk"
                        style="width: 122px;float: right;margin-right: 18px;margin-top: 48px;">
                </div>
                <!-- 普通会员 -->
                <div class="countC" v-if="memberInfo.membType=='UserNew'||memberInfo.membType=='User'">
                    <div class="ctop">
                        <div>
                            <p>智能筛选</p>
                            <div>不限次</div>
                        </div>
                        <div>
                            <p>全球院校库</p>
                            <div>20<span>次</span> </div>
                        </div>
                        <div>
                            <p>智能选校系统</p>
                            <div>0</div>
                        </div>
                    </div>
                    <div class="cbottom">
                        <div style="font-weight: 500;font-size: 13px;color: #0094FF;margin-bottom: 11px;">
                            <img src="../image/member/intor.png" alt="" style="width: 17px;vertical-align: bottom;">
                            会员介绍
                        </div>
                        <p>1.会员有效期一年，在一年内智能筛选可以使用:院校库和选校系统，港新，英国美国可以免费使用 </p>
                        <p>2.其他院校库和选校系统需要购买后使用;</p>
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align: center;">
            <img src="../image/member/hyqymx.png" alt="" style="width: 253px;margin: 28px 0 35px;">
        </div>
        <div class="quanyi" v-if="false">
            <div>
                <div><img src="../image/member/zhineng.png" alt="">智能筛选</div>
                <p>承办全年鸡蛋是1号会员店为尊享卡正式会员的每月专属福利(纯享卡7 天体验会员均无此项权益)，权益将以优惠券形式发放至账户，可直接使用优惠券兑换 One's Member 可生食鲜鸡蛋一箱(20
                    枚)。使用优惠券需符合运费规则。</p>
            </div>
            <div>
                <div><img src="../image/member/qqyxk.png" alt="">全球院校库</div>
                <p>承办全年鸡蛋是1号会员店为尊享卡正式会员的每月专属福利(纯享卡7 天体验会员均无此项权益)，权益将以优惠券形式发放至账户，可直接使用优惠券兑换 One's Member 可生食鲜鸡蛋一箱(20
                    枚)。使用优惠券需符合运费规则。</p>
            </div>
            <div>
                <div><img src="../image/member/ai.png" alt="">智能选校系统</div>
                <p>承办全年鸡蛋是1号会员店为尊享卡正式会员的每月专属福利(纯享卡7 天体验会员均无此项权益)，权益将以优惠券形式发放至账户，可直接使用优惠券兑换 One's Member 可生食鲜鸡蛋一箱(20
                    枚)。使用优惠券需符合运费规则。</p>
            </div>
            <div style="font-weight: 500;font-size: 13px;color: #333333;">权益使用规则</div>
            <div class="rule">
                <p>开卡会员:</br> 1.发放时间:开卡后24小时内自动发放</br> 2.发放张数:一次性到账12张 </br> 3.面额:30元/张 </br>
                    4.有效期:每月限用1张，如当月未使用则自动失效</br> 续费会员:
                    </br> 1.发放时间:续费会籍生效当日发放1张，此后每月1日发放</br> 2.发放张数:1张/月(共12张/年) </br> 3.面额:30元/张</br>
                    4.有效期:当月发放的优惠券仅当月有效，如当月未使用则自动失效</br> 特殊说明</br>
                    由于鸡蛋为生鲜类商品，个别地区无法配送，可选择0.1元领One's Member洗衣凝珠30颗。</br> 现在每月鸡蛋权益已经扩展为可兑换:可生食鸡蛋、鲜花权益，洗衣凝珠、五常大米。</p>
            </div>
            <div></div>
        </div>
        <el-table :data="tableData" stripe style="width: 1000px;margin:auto" border>
            <el-table-column prop="name" label="" width="">
            </el-table-column>
            <el-table-column prop="tyb" label="体验版" width="290" align="center">
                <templete slot-scope="scope">
                    <span v-if="scope.row.tyb==true"><img src="../image/member/true.png" alt=""></span>
                    <span v-else-if="scope.row.tyb==false"><img src="../image/member/false.png" alt=""></span>
                    <span v-else>{{scope.row.tyb}}</span>
                </templete>
            </el-table-column>
            <el-table-column prop="vip" label="VIP版" width="268" align="center">
                <templete slot-scope="scope">
                    <span v-if="scope.row.vip==true"><img src="../image/member/true.png" alt=""></span>
                    <span v-else-if="scope.row.vip==false"><img src="../image/member/false.png" alt=""></span>
                    <span v-else>{{scope.row.vip}}</span>
                </templete>
            </el-table-column>
            <el-table-column prop="svip" label="SVIP版" align="center" class-name="svipStyle" width="268">
                <templete slot-scope="scope">
                    <span v-if="scope.row.svip==true"><img src="../image/member/true.png" alt=""></span>
                    <span v-else-if="scope.row.svip==false"><img src="../image/member/false.png" alt=""></span>
                    <span v-else>{{scope.row.svip}}</span>
                </templete>
            </el-table-column>
        </el-table>
        <footer style="margin-top: 40px;">2023-2024 非攻留学大数据 版权所有 feigongdata.com 浙ICP备2024101258号-1</footer>
        <div class="dialog" v-if="pay">
            <div class="tbg">
                <div style="font-weight: 500;
                font-size: 17px;
                color: #FFF6D6;padding: 37px 0;text-align: center;">支付订单</div>
                <div class="diaText">
                    <div>
                        <p>购买详情 :</p>
                        <div>{{payInfo.name}}</div>
                    </div>
                    <div>
                        <p>实付金额 :</p>
                        <div><span>￥</span>{{payInfo.price}}</div>
                    </div>
                    <div>
                        <p>选择支付方式 :</p>
                    </div>
                    <div class="zf">
                        <img src="../image/customize/zfbActive.png" alt="" v-if="isZfb">
                        <img src="../image/customize/weixin.png" alt="" style="margin-left: 20px;" v-if="isZfb"
                            @click="weixnPay">
                        <img src="../image/customize/zfb.png" alt="" v-if="!isZfb" @click="zfbPay">
                        <img src="../image/customize/weixinActive.png" alt="" style="margin-left: 20px;" v-if="!isZfb">
                    </div>
                    <div class="qrcode" id="qrcode" ref="qrcode" style="margin-left: 50%;transform: translateX(-26%);"
                        v-if="!isZfb"> </div>
                    <!-- <iframe src="./zfb.html" frameborder="0"></iframe> -->
                    <!-- <div v-else v-html="zfbCode"></div> -->
                    <iframe v-else :srcdoc="zfbCode" frameborder="no" border="0" marginwidth="0" marginheight="0"
                        scrolling="no" width="200" height="200" style="overflow: hidden;width: 300px;
                        height: 300px;
                        transform: scale(0.4);
                        margin-top: -23%;
                        margin-left: 8%;
                        margin-bottom: -28%;">
                    </iframe>
                    <div class="btn">
                        <button @click="zhifuSuccess">支付完成</button>
                        <button style="background: #B0B0B0;margin-left: 20px;" @click="()=>pay=false">取消支付</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        mixins: [myMixin],
        el: "#app",
        data() {
            return {
                activeName: '1',
                tableData: [{
                    name: '全球院校库',
                    tyb: false,
                    vip: true,
                    svip: true
                }, {

                    name: '智能选校系统定制',
                    tyb: false,
                    vip: true,
                    svip: true
                }, {

                    name: '智能筛选',
                    tyb: false,
                    vip: true,
                    svip: true
                }, {
                    name: '多库联合筛选',
                    tyb: false,
                    vip: true,
                    svip: true
                }, {
                    name: '智能营销',
                    tyb: false,
                    vip: false,
                    svip: true
                }, {
                    name: 'PDF下载',
                    tyb: false,
                    vip: '7次/月',
                    svip: '不限'
                }, {
                    name: '方案管理',
                    tyb: '限1人方案',
                    vip: '限3人方案',
                    svip: '不限'
                }],
                memberInfo: {},
                pay: false,
                totalPrice: '',
                isZfb: false,
                payInfo: {},
                zfbCode: '',
                order_id: '',
                memberpricelists: {},
                priceList: [
                    {
                        name: '中国香港',
                        price: '无限期'
                    },
                    {
                        name: '新加坡',
                        price: '无限期'
                    }, {
                        name: '英国',
                        price: '无限期'
                    }
                ]
            }
        },
        created() {
            http('userdata/memberInfo', 'post').then(res => {
                console.log('memberInfo', JSON.parse(Decrypt(res.data)));
                let data = JSON.parse(Decrypt(res.data))
                this.memberInfo = data
                if (this.memberInfo.membType == 'userSVIP') {
                    http('productdata/memberpricelists?membtype=' + 22, 'post').then(res => {
                        console.log('memberpricelists', JSON.parse(Decrypt(res.data)));
                        let data = JSON.parse(Decrypt(res.data))
                        this.memberpricelists = data
                        this.payInfo = data
                    })
                } else {
                    http('productdata/memberpricelists?membtype=' + 21, 'post').then(res => {
                        console.log('memberpricelists', JSON.parse(Decrypt(res.data)));
                        let data = JSON.parse(Decrypt(res.data))
                        this.memberpricelists = data
                        this.payInfo = data
                    })
                }

            })
            http('userdata/paiddatabaseInfo', 'post').then(res => {
                let data = JSON.parse(Decrypt(res.data))
                console.log('paiddatabaseInfo', data);
            })

        },
        methods: {
            gmzssjk() {
                location.href = './customize.html'
            },
            openSVip() {
                http('productdata/memberpricelists?membtype=' + 22, 'post').then(res => {
                    console.log('memberpricelists', JSON.parse(Decrypt(res.data)));
                    let data = JSON.parse(Decrypt(res.data))
                    this.payInfo = data
                    this.pay = true
                    this.weixnPay()
                })

            },
            openVip() {
                if (this.memberInfo.membType == 'userSVIP') {
                    http('productdata/memberpricelists?membtype=' + 22, 'post').then(res => {
                        console.log('memberpricelists', JSON.parse(Decrypt(res.data)));
                        let data = JSON.parse(Decrypt(res.data))
                        this.memberpricelists = data
                        this.payInfo = data
                    })
                } else {
                    http('productdata/memberpricelists?membtype=' + 21, 'post').then(res => {
                        console.log('memberpricelists', JSON.parse(Decrypt(res.data)));
                        let data = JSON.parse(Decrypt(res.data))
                        this.memberpricelists = data
                        this.payInfo = data
                    })
                }
                // http('productdata/memberpricelists?membtype=' + 21, 'post').then(res => {
                //     console.log('memberpricelists', JSON.parse(Decrypt(res.data)));
                //     let data = JSON.parse(Decrypt(res.data))
                //     this.payInfo = data
                //     this.pay = true
                //     this.weixnPay()
                // })
                // this.payInfo = data
                this.pay = true
                this.weixnPay()

            },
            weixnPay() {
                this.isZfb = false
                http('tradedata/goodsorder?pay_type=2', 'post', {
                    goodsIdItems: [this.payInfo.id]
                }).then(res => {
                    console.log('wx', JSON.parse(Decrypt(res.data)));
                    let data = JSON.parse(Decrypt(res.data))
                    this.order_id = data.OrderId
                    this.$nextTick(() => {
                        this.$refs.qrcode.innerHTML = ''
                        this.createCode(data.payQrCode);
                    })
                })
            },
            zfbPay() {
                this.isZfb = true
                http('tradedata/goodsorder?pay_type=1', 'post', {
                    goodsIdItems: [this.payInfo.id]
                }).then(res => {
                    let data = JSON.parse(Decrypt(res.data))
                    this.zfbCode = data.payQrCode
                    // .split('<script>')[0]
                    console.log('this.zfbCode', this.zfbCode);
                    this.order_id = data.OrderId
                    console.log('zfb', this.zfbCode);
                    this.$nextTick(() => {
                        // this.$refs.qrcode.innerHTML = ''
                        // document.forms['alipaysubmit'].submit();
                    })
                })
            },
            createCode(text) {
                this.qrcode = new QRCode(this.$refs.qrcode, {
                    text: text,
                    width: 108,
                    height: 108,
                    colorDark: "#000",
                    colorLight: "white",
                    correctLevel: QRCode.CorrectLevel.H
                });
            },
            zhifuSuccess() {
                http('tradedata/orderquery?order_id=' + this.order_id, 'post').then(res => {
                    let data = JSON.parse(Decrypt(res.data))
                    console.log(data);
                    // success = 0, fail = -1, wait = 1,
                    if (data.payStatus == 0) {
                        this.$message.success('支付成功')
                        this.pay = false
                        location.href = './memberLogin.html'
                    } else if (data.payStatus == -1) {
                        this.$message.error('支付失败')

                    } else if (data.payStatus == 1) {
                        this.$message.warning('等待中...')
                    }
                })
            }
        }
    })
</script>
<style>
    .cell {
        font-weight: 500;
        font-size: 12px;
        color: #000000;
    }

    .el-table th:nth-child(2)>.cell {
        font-weight: 500;
        font-size: 20px;
        color: #272643;
    }

    .el-table th:nth-child(3)>.cell {
        font-weight: 500;
        font-size: 20px;
        color: #0094FF;
    }

    .el-table th:nth-child(4)>.cell {
        font-weight: 500;
        font-size: 20px;
        color: #FED000;
    }

    .el-table th.el-table__cell {
        border: 0;
    }

    .svipStyle {
        background: rgba(255, 224, 82, 0.1) !important;
    }

    tr:nth-child(even) td:nth-child(4) {
        background-color: #faf7e9 !important;
    }

    .el-table img {
        width: 20px;
        vertical-align: middle;
    }

    .el-table--border .el-table__cell:first-child .cell {
        padding-left: 25%;
    }
</style>

</html>